<template>
    <div class="amap-page-container">
        <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult" size='mini'></el-amap-search-box>
      <el-amap vid="amapDemo" :center="lngLat" :zoom="zoom" class="amap-demo" :events="events">
            <el-amap-marker :position="lngLat" ></el-amap-marker>
      </el-amap>
      <div class="toolbar">
        position: [{{ lngLat[0] }}, {{ lngLat[1] }}]
      </div>
    </div>
  </template>
  <script>
    export default {
      data() {
        let that = this;
        return {
        searchOption: {
            city: '杭州',
            citylimit: false
          },
          zoom: 12,
          center: [121.538162, 31.20508],
          address: '',
          events: { //地图点击事件
            click(e) {
              let { lng, lat } = e.lnglat;
              that.lngLat = [lng,lat];               
            }
          },
          lngLat:[120.1275, 30.27192]
        };
      },
      methods:{
            onSearchResult(pois) {
                let info=pois[0]
                let lngLat=[info.lng,info.lat]
                this.lngLat=lngLat;
                this.zoom=15
            }
        }
    }
     
</script>
<style lang="less" scoped>
.amap-demo{
    height:500px !important;
    width: 100%;
}
.search-box {
    position: absolute;
    top: 25px;
    left: 20px;
}
.amap-page-container {
    position: relative;
}
</style>
